<template>
  <div class="divisional">

 <div class="search_box" style="width: 93.5%;">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item,index) in list_1" :key="index">
          <span class="inpText">{{item.name}}</span>
          <el-input v-model.trim="item.input_val" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容" style="width: 60%;"></el-input>
        </el-col>
        <!-- <el-col :span="6">
          <span class="inpText">催收次数</span>
         <el-input v-model="cuishouNum" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容" style="width: 60%;"></el-input>
        </el-col> -->
        <el-col :span="6" >
          <span class="inpText">催&nbsp;收&nbsp;方&nbsp;式&nbsp;</span>
          <el-select v-model="outbound" size="small" placeholder="请选择" style="width: 60%;">
            <el-option v-for="item in outboundOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6" >
          <span class="inpText">逾期等级</span>
         <el-select v-model="overdueLevelF" size="small" placeholder="请选择" style="width: 27%;">
           <el-option v-for="item in overdueLevelOptions" :key="item.index" :label="item.label" :value="item.value"></el-option>
         </el-select>
         <span>- -</span>
         <el-select v-model="overdue_levelS" size="small" placeholder="请选择" style="width: 27%;">
           <el-option v-for="item in overdueLevelOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
        </el-col>
        <el-col :span="6" >
          <span class="inpText">反&nbsp;&nbsp;馈&nbsp;</span>
          <el-select v-model="feedbackCode" size="small" placeholder="请选择" style="width: 60%;">
            <el-option v-for="item in backOptions" :key="item.number" :label="item.chinese" :value="item.number"></el-option>
          </el-select>
        </el-col>

        <el-col :span="6" >
          <span class="inpText">风险等级</span>
          <el-select v-model="risklevel" size="small" placeholder="请选择"  style="width: 60%;">
            <el-option v-for="item in risklevelOptions" :key="item.index" :label="item.label" :value="item.value" ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6" >
          <span class="inpText">是否首次逾期</span>
          <el-select v-model="isFirstIssue" size="small" placeholder="请选择" style="width: 60%;">
            <el-option v-for="item in yuqiOptions" :key="item.index" :label="item.label" :value="item.value" ></el-option>
          </el-select>
        </el-col>

         <el-col :span="6" id="rqfw">
            <span for>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;反馈日期</span>
            <el-date-picker v-model="dateVal" type="daterange" size="small" width="30%" format="yyyy-MM-dd"
                   value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 60%;"></el-date-picker>
         </el-col>


         <el-col :span="6">
             <el-button size="small" type="primary" @click="search" style="margin-left: 67px;margin-top: 1%">查询</el-button>
             <el-button size="small" type="primary" @click="reset">重置</el-button>
         </el-col>
      </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(212, 216, 206, 1)"
          :data="tableData" :header-cell-style="{background:'LightYellow	',color:'black'}" max-height="400" style="width: 100%">
         <!-- <el-table-column label="新旧网贷" :formatter="IsNewLoan" width>
          </el-table-column> -->
          <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
          <el-table-column prop="customerId" label="客户号"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="peopleId" label="身份证号" :formatter="hidInfo"></el-table-column>
          <el-table-column prop="phoneNum" label="手机号" :formatter="hidInfo"></el-table-column>
          <el-table-column prop="contractNum" label="贷款合同号"></el-table-column>
          <el-table-column prop="bank" label="所属银行" width></el-table-column>
          <!-- <el-table-column prop="serialNumber" label="案件流水号" width></el-table-column> -->
          <!-- <el-table-column label="是否逾期" :formatter="IsFirst">
          </el-table-column> -->
          <!-- <el-table-column prop="collectionTimes" label="催收次数"></el-table-column> -->
          <!-- <el-table-column prop="riskLevel" label="风险等级"></el-table-column>
          <el-table-column prop="overdueGrade" label="逾期等级"></el-table-column>
          <el-table-column prop="notificationMethod" label="反馈渠道" :formatter="notificationToChinese">
          </el-table-column>
          <el-table-column prop="sendTime" label="反馈日期"></el-table-column>
          <el-table-column prop="feedbackCode" label="反馈标记"></el-table-column>
          <el-table-column prop="feedbackCodeMessage" label="反馈备注"></el-table-column> -->
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="pageBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15,20]"
        :page-size="pageSize"
        :total="total"

        layout="total, sizes, prev, pager, next, slot, jumper">
        </el-pagination>
    </div>
    <el-dialog :visible.sync="isInfodetail" width="75%">
      <span slot="title">信息详情</span>
      <div class="mainInfoBox">
        <div class="infoBox" v-for="(item,index) in infoList" :key="index">
          <label for>{{item.text}}:</label>
          <el-input v-model="item.value" size="small" disabled placeholder="请输入内容"></el-input>
        </div>

        <el-divider content-position="left">催收反馈记录</el-divider>

        <el-row style="width: 100%;">
          <el-col >
            <el-table :data="infoRecords" :header-cell-style="{background:'LightYellow	',color:'black'}"
              style="width: 100%" >
              <el-table-column prop="serialNumber" label="案件流水号" ></el-table-column>
              <el-table-column prop="overdueAmount" label="逾期金额"></el-table-column>
              <el-table-column prop="overdueGrade" label="逾期等级"></el-table-column>
              <el-table-column prop="riskLevel" label="风险等级"></el-table-column>
              <el-table-column prop="notificationMethod" label="反馈渠道" :formatter="notificationToChinese">
              </el-table-column>
              <el-table-column prop="sendTime" label="反馈日期"></el-table-column>
              <el-table-column prop="feedbackCode" label="反馈标记"></el-table-column>
              <el-table-column prop="feedbackCodeMessage" label="反馈备注"></el-table-column>
              <el-table-column prop="customerServiceId" label="客服工号"></el-table-column>
              <el-table-column prop="customerServiceName" label="客服姓名"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    Message
  } from "element-ui";
  import {
    cmcUrl
  } from '../../../static/baseUrl';
  export default {
    data() {
      return {
        loading: false,
        isInfodetail: false,
        currentPage: 1,
        total: 0,
        pageSize: 10,
        list_1: [
          {
            name: "客户姓名",
            input_val: "",
          },
          {
            name: "身份证号",
            input_val: "",
          },
          {
            name: "贷款合同号",
            input_val: "",
          },
          {
            name: "所属银行",
            input_val: "",
          },

          {
            name: "手机号",
            input_val: "",
          },
        ],
        dateVal: "",
        feedbackCode: "",
        //反馈码
        backOptions: [{
            number: "FB001",
            chinese: "反馈一",
          }, {
            number: "FB002",
            chinese: "反馈二",
          }, {
            number: "FB003",
            chinese: "反馈三",
          }, {
            number: "FB004",
            chinese: "反馈四",
          },

        ],
        options: [{
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
        tableData: [],
        //   逾期选择
        isFirstIssue: "",
        yuqiOptions: [{
            label: "是",
            value: 1,
            index: 0,
          },
          {
            label: "否",
            value: 0,
            index: 1,
          },
        ],
        //   催收
        cuishouNum: "",
        //   催收方式
        outbound: "",
        outboundOptions: this.GLOBAL.outboundOptions,
        //   风险等级
        risklevel: "",
        risklevelOptions: this.GLOBAL.risklevelOptions,
        //新老网贷
        isNewOptions: [{
          text: "新网贷",
          value: "1",
        }, {
          text: "旧网贷",
          value: "2",
        }, ],

        //   逾期等级
        overdueLevelF: "",
        overdue_levelS: "",
        overdueLevelOptions: this.GLOBAL.overdueLevelOptions,
        //   详情
        detailInfo: [],
        //详情页面要显示字段
        infoList: [/* {
          field: "serialNumber",
          text: "案件流水号",
          value:"",
        }, */{
          field: "name",
          text: "姓名",
          value:"",
        },{
          field: "peopleId",
          text: "身份证号",
          value:"",
        },{
          field: "bank",
          text: "所属银行",
          value:"",
        },{
          field: "customerId",
          text: "客户号",
          value:"",
        },{
          field: "phoneNum",
          text: "手机号",
          value:"",
        },{
          field: "contractNum",
          text: "贷款合同号",
          value:"",
        }/* ,{
          field: "receiptNum",
          text: "借据号",
          value:"",
        },{
          field: "overdueAmount",
          text: "逾期金额",
          value:"",
        } */],
        infoRecords:[],
      };
    },
    created() {
      this.checkInfo();
      this.getFeedbackCode();
    },
    methods: {
      indexMethod(index) {
        index = (index + 1) + (this.currentPage - 1) * this.pageSize;
        return index
      },
      search(){
        this.currentPage = 1;
        this.checkInfo();
      },
      IsNewLoan(row) {
        let vv = row.newAndOldLoansn;
        let ttt = this.isNewOptions.find((element) => (element.value == vv));
        return ttt ? ttt.text : "";
      },
      IsFirst(row) {
        let vv = row.isFirstIssue;
        let ttt = this.yuqiOptions.find((element) => (element.value == vv));
        return ttt ? ttt.label : "";
      },
      notificationToChinese(row) {
        let vv = row.notificationMethod;
        let ttt = this.outboundOptions.find((element) => (element.value == vv));
        return ttt ? ttt.label : "";
      },
      handleCurrentChange(data) {
        this.currentPage = data;
        this.checkInfo();
      },
      handleSizeChange(data) {
        console.log(data, "handleSizeChange");
        this.pageSize = data;
        this.checkInfo();
      },
      handleInfoDetail(val) {
        switch (val) {
          case "id":
            return "ID";
          case "serialNumber":
            return "案件流水号";
          case "customerId":
            return "客户号";
          case "contractNum":
            return "贷款合同号";
          case "receiptNum":
            return "贷款借据号";
          case "peopleId":
            return "身份证号";
          case "name":
            return "姓名";
          case "age":
            return "年龄";
          case "sex":
            return "性别";
          case "education":
            return "学历";
          case "maritalStatus":
            return "婚姻状况";
          case "bank":
            return "所属银行";
          case "overdueAmount":
            return "逾期金额";
          case "overdueDay":
            return "逾期天数";
          case "overduePrincipal":
            return "逾期本金";
          case "productName":
            return "产品名称";
          case "applicationTime":
            return "申请时间";
          case "lateCharge":
            return "逾期罚息";
          case "phoneNum":
            return "手机号";
          case "riskLecvel":
            return "风险等级";
          case "customerLabel":
            return "客群细分标签";
          case "repaymentNum":
            return "还款账号";
          case "collectionTimes":
            return "催收次数";
          case "isFirstIssue":
            return "是否是首次";
          case "interestRefund":
            return "退罚息";
          case "score":
            return "评分";
          case "state":
            return "状态";
          case "externalCallSign":
            return "外呼流水号";
          case "accountNumber":
            return "账户号";
          case "talkTime":
            return "通话时长";
          case "talkBegin":
            return "通话开始时间";
          case "talkEnd":
            return "通话结束时间";
          case "customerServiceId":
            return "客服工号";
          case "customerServiceName":
            return "客服姓名";
          case "feedbackCode":
            return "反馈码";
          case "timeStamp":
            return "时间戳字段";
          case "sendTime":
            return "发送时间";
          case "customerReceivingTime":
            return "客户接收时间";
          case "sendStatus":
            return "发送状态";
          case "notificationMethod":
            return "反馈渠道";
          case "dataTime":
            return "数据时间";
          case "scriptTemplate":
            return "话术模板";
          case "feedbackCode":
            return "反馈标记";
          case "feedbackCodeMessage":
            return "反馈备注";
          case "newAndOldLoansn":
            return "新旧网贷";
          case "productCode":
            return "产品编码";
          case "assetSideCode":
            return "资产方编码";
          case "overdueGrade":
            return "逾期等级";
          case "riskLevel":
            return "风险等级";
          case "collectionPriority":
            return "催收优先等级";
          default:
            return val;
        }
      },
      handleInfoValue(data) {

        let tempa = this.IsNewLoan(data);
        console.log("tempa  ", tempa);
        this.$set(data, "newAndOldLoansn", tempa);

        let tempb = this.IsFirst(data);
        console.log("tempb  ", tempb);
        this.$set(data, "isFirstIssue", tempb);

        let tempc = this.notificationToChinese(data);
        console.log("tempc  ", tempc);
        this.$set(data, "notificationMethod", tempc);

      },
      //过滤不显示字段
      filterHiddenF(data) {
        console.log("data   ", data);
        Object.keys(this.hiddenF).forEach((item) => {
          let ss = this.hiddenF[item];
          console.log("ss   ", ss);
          this.$delete(data, ss.value);
        });
        return data;
      },
      handleClick(data) {
        this.infoRecords=[];
        console.log(data, "sss");
        let options = {
          peopleId: data["peopleId"],
          contractNum: data["contractNum"]
        }
        //查询催收记录
        this.$axios({
            method: "post",
            url: `/CMC/recovery/getCkOrderInfo`,
            data: options,
          })
          .then((res) => {
            console.log(res, "数据详情");
            if (res.code == 200) {
              this.infoRecords = res.data.dataList;
              //this.total = Number(res.data.total);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {console.log(err)});
        //组织详情展示
        Object.keys(this.infoList).forEach((item) => {
          let fiedMap = this.infoList[item];
          let key = fiedMap.field;
          this.$set(fiedMap,"value",data[key]);
        })
        //console.log(this.detailInfo, "this.detailInfo");
        this.isInfodetail = true;
      },
      reset() {
        this.list_1[0].input_val = "";
        this.list_1[1].input_val = "";
        this.list_1[2].input_val = "";
        this.list_1[3].input_val = "";
        this.list_1[4].input_val = "";
        this.isFirstIssue = "";
        this.cuishouNum = "";
        this.outbound = "";
        this.risklevel = "";
        this.overdueLevelF = "";
        this.overdue_levelS = "";
        this.feedbackCode = "";
        this.dateVal = "";
      },
      checkInfo() {
        //   姓名
        let name = this.list_1[0].input_val;
        // 身份证
        let peopleId = this.list_1[1].input_val;
        // 贷款合同号
        let contractNum = this.list_1[2].input_val;
        // 客户号
        let bank = this.list_1[3].input_val;
        // s手机号
        let phone = this.list_1[4].input_val;
        // 是否逾期
        let isFirstIssue = this.isFirstIssue;
        //   催收次数
        let collectionTimes = this.cuishouNum;
        //   催收方式
        let outbound = this.outbound;
        //   风险等级
        let riskLevel = this.risklevel;
        //   逾期等级
        if(this.overdueLevelF){
          if(!this.overdue_levelS){
            this.overdue_levelS = this.overdueLevelF;
          }
        }
        if(this.overdue_levelS){
          if(!this.overdueLevelF){
            this.overdueLevelF = this.overdue_levelS;
          }
        }
        let overdueLevelF = this.overdueLevelF;
        let overdueLevelS = this.overdue_levelS;
        let feedbackCode = this.feedbackCode;
        //反馈时间范围
        let startDate = this.dateVal === null ? null : this.dateVal[0];
        let endDate = this.dateVal === null ? null : this.dateVal[1];
        this.loading = true;
        let options = {
          bank: bank,
          peopleId: peopleId,
          contractNum: contractNum,
          name: name,
          phoneNum: phone,
          isFirstIssue: isFirstIssue,
          collectionTimes: collectionTimes,
          notificationMethod: outbound,
          riskLevel: riskLevel,
          overdueLevelF: overdueLevelF,
          overdueLevelS: overdueLevelS,
          feedbackCode: feedbackCode,
          startDate: startDate,
          endDate: endDate,
          page: this.currentPage,
          pageSize: this.pageSize,
        };
        this.$axios({
            method: "post",
            url: `/CMC/recovery/list`,
            data: options,
          })
          .then((res) => {
            this.loading = false;
            console.log(res, "查询数据");
            if (res.code == 200) {
              this.tableData = res.data.list;
              this.total = Number(res.data.total);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      },
      //获取反馈标记下拉选
      getFeedbackCode() {
        this.$axios({
            method: "get",
            url: `/CMC/feedBack/selectList`,
            data: "",
          })
          .then((res) => {
            console.log(res, "查询数据");
            if (res.code == 200) {
              this.backOptions = res.data;
              console.log("this.backOptions== ", this.backOptions);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      },
    },
  };
</script>
<style lang="scss" scoped>
  .divisional {
   /deep/ .el-row:nth-child(1) {
       width: 100%;
       height: 66px;
       // background: pink;
       padding: 0;
       margin: 0;

       .el-col {
         padding: 0;
         height: inherit;
         /* border: 1px solid slategrey; */
         box-sizing: border-box;
         overflow: hidden;

         div:nth-child(1) {
           width: 100%;
           height: inherit;
           //   background: yellowgreen;
           display: flex;
           flex-wrap: wrap;
           // justify-content: flex-start;
           justify-content: space-around;
           box-sizing: border-box;
           /* padding-left: 30px;
           padding-top: 40px; */
           overflow-y: auto;

           .v_box {
             width: 20%;
             height: 8vh;
             margin-left: 15px;
             margin-right: 40px;
             // margin-bottom: 10px;
             // background: chocolate;
             overflow: hidden;
             display: flex;
             flex-direction: column;
             padding: 0;
             border: none;

             div {
               padding: 0;
             }

             &:nth-child(7) {

               .el-date-editor--daterange.el-input,
               .el-date-editor--daterange.el-input__inner,
               .el-date-editor--timerange.el-input,
               .el-date-editor--timerange.el-input__inner {
                 width: 100%;
               }
             }

             &:last-child {
               display: flex;
               flex-direction: row;
               justify-content: center;
               align-items: center;

               .el-button {
                 width: 70px;
                 height: 30px;

                 &:first-child {
                   margin-right: 10px;
                 }
               }
             }
           }
         }
       }
     }

     /deep/ .el-row:nth-child(2) {
       width: 100%;
      /* height: 60vh; */
       // background: pink;
       padding: 0;
       margin: 0;
       margin-top: 10px;

       table {
         tbody {
           tr {
             td {
               .cell {
                 box-sizing: border-box;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 word-break: normal !important;
                 line-height: inherit;
                 //   padding-right: 10px;
               }
             }
           }
         }
       }
     }

     .pageBox {
       display: flex;
       width: 100%;
       justify-content: left;
       margin-top: 10px;
     }


     /deep/ .el-dialog {
       .mainInfoBox {
         width: 100%;
         max-height: 60vh;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: flex-start;
         flex-wrap: wrap;
         overflow-y: auto;

         .infoBox {
           display: flex;
           flex-direction: row;
           justify-content: center;
           align-items: center;
           height: 40px;
           width: 30%;

           label {
             width: 100px;
           }

           .el-input {
             flex: 1 1 auto;
           }
         }
       }
     }
   }


   .search_box {
     background: #fff;
     border-radius: 10px;
     padding: 40px 40px 175px 40px;
     margin: 0 0 20px 0;
   }

   .box_center {
     text-align: left;
   }

   .searchBtn {
     margin-left: 80px;
   }

  .search_box .inpText{
    width: 75px;
    justify-content: space-between;
    text-align: right;
    display: inline-block;
  }
  #rqfw .el-range-editor.el-input__inner {
    padding: 2px 2px;
  }
</style>
